<template>
    <!-- 显示原始消息 -->
    <p>初始message：{{ message }}</p>
    
    <!-- 显示通过计算属性处理后的反转消息 -->
    <p>反转之后的message：{{ reversedMessage }}</p>
    
    <!-- 点击按钮更新原始消息，触发计算属性重新计算 -->
    <button @click="updateMessage">更改</button>
</template>

<script setup>
// 导入创建响应式变量和计算属性的工具函数
import { ref, computed } from 'vue'

// 创建响应式变量message，初始值为'hello vue'
// ref用于创建基本类型的响应式数据，通过.value访问和修改
const message = ref('hello vue')

// 创建计算属性reversedMessage：
// 1. computed接收一个函数作为参数，返回计算后的结果
// 2. 当依赖的响应式数据（message）变化时，会自动重新计算
// 3. 计算属性会被缓存，提升性能
const reversedMessage = computed(() => {
    // 修复：添加return语句，返回处理后的反转字符串
    // 处理逻辑：拆分为数组 -> 反转数组 -> 拼接为字符串
    return message.value.split('').reverse().join('')
})

// 定义更新消息的函数
const updateMessage = () => {
    // 修改响应式变量的值（需通过.value）
    message.value = 'hello vue 3'
    // 此时计算属性reversedMessage会自动重新计算
}

/* 
  script setup语法特点：
  1. 无需手动导出变量和函数，会自动暴露给模板使用
  2. 计算属性必须有返回值，否则模板中无法获取结果
  3. 计算属性依赖的响应式数据变化时，会自动触发重新计算
*/
</script>
    